<template>
  <div>
    <!-- 基础信息 -->
    <el-form label-width="120px" label-position="left">
      <el-row class="container" STYLE="margin-top:20PX;">
          <h3 style="margin-bottom:20px;">基础信息</h3>
          <el-col :span="12">
              <el-form-item label="产品类型" >
                    <el-select v-model="headerlist.type" placeholder="请选择" style="width:300px" @change="changeType">
                        <el-option label="成品" value="成品"></el-option>
                        <el-option label="半成品" value="半成品"></el-option>
                    </el-select>
              </el-form-item>
              <el-form-item label="品名">
                  <template>
                      <el-select
                          v-model="headerlist.tradeName"
                          style="width:300px"
                          placeholder="请选择"
                          @change="gettechList"
                      >
                          <el-option
                              v-for="item in breedList"
                              :key="item.id"
                              :label="item.materialName"
                              :value="item.materialName"
                          ></el-option>
                      </el-select>
                  </template>
              </el-form-item>
              <el-form-item label="预计产量">
			           <el-input placeholder="请输入" v-model="headerlist.predict"  style="width: 210px">
			               <template slot="append">
			                    <el-select v-model="headerlist.predictSpec"  placeholder="单位"  value-key="id"  style="width:80px !important">
			                       <el-option v-for="item2 in unitlist" :key="item2.id" :label="item2.name" :value="item2.name">{{item2.name}}</el-option>
			                   </el-select>
			               </template>
			           </el-input>
			           <el-button style="margin-left:10px" >单位管理</el-button>
			  </el-form-item>
          </el-col>
          <el-col :span="10">
			  <el-form-item label="生产批号" >
                <el-input style="width:300px;" v-model="headerlist.batchNumber"></el-input>
              </el-form-item>
                <el-form-item label="规格">
			           <el-input placeholder="请输入" v-model="headerlist.specification"  style="width: 210px">
			               <template slot="append">
			                    <el-select v-model="headerlist.spec"  placeholder="单位" value-key="id"  style="width:80px !important">
			                       <el-option v-for="item2 in unitlist" :key="item2.id" :label="item2.name" :value="item2.name">{{item2.name}}</el-option>
			                   </el-select>
			               </template>
			           </el-input>
			           <el-button style="margin-left:10px" >单位管理</el-button>
			  </el-form-item>
              <el-form-item label="生产工艺">
                  <!-- <el-input style="width:300px;" v-model="headerlist.phone"></el-input> -->
                   <el-select v-model="headerlist.craftName"  placeholder="生产工艺"  @change="gettech"   value-key="id"  style="width:300px">
                        <el-option v-for="item3 in techList" :key="item3.id" :label="item3.processName" :value="item3">{{item3.processName}}</el-option>
                    </el-select>
              </el-form-item>
          </el-col>
      </el-row>



      <!-- <el-dialog title="选择用户" :visible.sync="dialogTableVisible">
        <el-form :model="ruleForm" label-position="left" >
          <el-row :gutter="40">
            <el-col :span="11">
              <el-form-item>
                <el-input v-model="query" @change="getlist" placeholder="用户名称/联系人" style="width:200px;"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-table
            :data="tableData"
            border
            style="margin-top:20px;"
            ref="multipleTable"
            header-cell-class-name="table-header"
        >
            <el-table-column prop="clientName" sortable label="客户名称"></el-table-column>
            <el-table-column prop="area" sortable label="所在地址"></el-table-column>
            <el-table-column prop="userName" sortable label="联系人"></el-table-column>
            <el-table-column prop="phone" sortable label="手机号码"></el-table-column>
            <el-table-column label="操作" width="150" align="center">
                <template slot-scope="scope">
                    <el-button
                        type="text"
                        @click="handleSelect(scope.$index, scope.row)"
                    >选择</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
          layout="total, prev, pager, next, jumper"
          :page-size="pagesize"
          :current-page.sync="currentPage"
          :total="total"
          @current-change="handleCurrentChange"
          style="margin-top:20px"
        ></el-pagination>
      </el-dialog> -->
    </el-form>




    <!--               原料              -->
    <el-form class="order">
      <el-row class="container" STYLE="margin-top:20PX;">
        <h3 style="margin-bottom:20px;">原料</h3>
          <el-table
            :data="list"
            border
            style="margin-top:20px;"
            ref="multipleTable"
            header-cell-class-name="table-header"
            class="order-table"
          >
            <el-table-column label="物料名称">
              <template slot-scope="scope">
                    <!-- <el-form-item label="身份证号码："> -->
                       <el-input placeholder="请输入内容" v-model="scope.row.materialName" @click.native="openmaterial(scope.$index, scope.row)">
                    </el-input>
              </template>
            </el-table-column>
            <el-table-column prop="specs" label="物料代码">
                <template slot-scope="scope">
                     <el-input placeholder="请输入内容" v-model="scope.row.materialCode" @click.native="openmaterial(scope.$index, scope.row)">
                    </el-input>
              </template>
            </el-table-column>
            <el-table-column prop="batch" label="批号">
                <template slot-scope="scope">
                     <el-input placeholder="请输入内容" v-model="scope.row.materialBatch" @click.native="openmaterial(scope.$index, scope.row)">
                    </el-input>
              </template>
            </el-table-column>
            <el-table-column prop="price" label="供应商">
              <template slot-scope="scope">
                <el-form-item >
                    <el-select
                        v-model="scope.row.materialSupplier"
                        value-key="id"
                        filterable
                        placeholder="请选择"
                        style="width: auto"
                    >
                        <el-option v-for="item in supplierList" :key="item.id" :label="item.supplierName" :value="item.supplierName">
                            {{ item.supplierName }}
                        </el-option>
                    </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="materialAmount" label="数量">
              <template slot-scope="scope">
                <el-form-item>
					 <el-input  placeholder="请输入内容" v-model="scope.row.materialAmount" ></el-input>
                </el-form-item>
              </template>
            </el-table-column>


            <el-table-column label="操作" width="150" align="center">
                <template slot-scope="scope">
                    <el-button
                        type="text"
                        style="color: red;"
                        @click="handleDel(scope.$index, scope.row)"
                    >删除</el-button>
                </template>
            </el-table-column>
          </el-table>
          <el-col class="add" @click.native="addProduct">+添加原料</el-col>
      </el-row>

      <el-dialog title="选择" :visible.sync="dialogTableVisible1">
        <el-form :model="ruleForm1" label-position="left" label-width="100px">
            <el-form-item label="物资类型" >
                    <el-select v-model="type2" placeholder="请选择" style="width:300px" @change="getProductList">
                        <el-option label="原料" value="原料"></el-option>
                        <el-option label="半成品" value="半成品"></el-option>
                    </el-select>
              </el-form-item>
        </el-form>
        <el-table
            :data="ProductList"
            border
            style="margin-top:20px;"
            ref="multipleTable"
            header-cell-class-name="table-header"
        >
            <el-table-column prop="productName" sortable label="物料名称"></el-table-column>
            <el-table-column prop="warehouseName" sortable label="所属仓位"></el-table-column>
            <el-table-column prop="batch" sortable label="批号"></el-table-column>
            <el-table-column prop="batch" sortable label="可用数量">
				<template slot-scope="scope">
					{{scope.row.number}}{{scope.row.specsUnit}}
				</template>
			</el-table-column>

            <el-table-column label="操作" width="150" align="center">
                <template slot-scope="scope">
                    <el-button
                        type="text"
                        @click="handleSelect1(scope.$index, scope.row)"
                    >选择</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
          layout="total, prev, pager, next, jumper"
          :page-size="pagesize"
          :current-page.sync="currentPage1"
          :total="total1"
          @current-change="handleCurrentChange1"
          style="margin-top:20px"
        ></el-pagination>
      </el-dialog>
    </el-form>


    <!-- 辅料   -->
    <el-form label-width="120px" label-position="left">
        <el-form class="order">
            <el-row class="container" STYLE="margin-top:20PX;">
                <h3 style="margin-bottom:20px;">辅料</h3>
                <el-table
                    :data="list1"
                    border
                    style="margin-top:20px;"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                    class="order-table"
                >
                    <el-table-column label="物料名称">
              <template slot-scope="scope">
                    <!-- <el-form-item label="身份证号码："> -->
                       <el-input placeholder="请输入内容" v-model="scope.row.ingredientsName" @click.native="openmaterial1(scope.$index, scope.row)">
                    </el-input>
              </template>
            </el-table-column>
            <el-table-column prop="specs" label="物料代码">
                <template slot-scope="scope">
                     <el-input placeholder="请输入内容" v-model="scope.row.ingredientsCode" @click.native="openmaterial1(scope.$index, scope.row)">
                    </el-input>
              </template>
            </el-table-column>
            <el-table-column prop="batch" label="批号">
                <template slot-scope="scope">
                     <el-input placeholder="请输入内容" v-model="scope.row.ingredientsBatch" @click.native="openmaterial1(scope.$index, scope.row)">
                    </el-input>
              </template>
            </el-table-column>
            <el-table-column prop="price" label="供应商">
              <template slot-scope="scope">
                <el-form-item >
                    <el-select
                        v-model="scope.row.ingredientsSupplier"
                        value-key="id"
                        filterable
                        placeholder="请选择"
                        style="width: auto"
                    >
                        <el-option v-for="item in supplierList" :key="item.id" :label="item.supplierName" :value="item.supplierName">
                            {{ item.supplierName }}
                        </el-option>
                    </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="ingredientsAmount" label="数量">
              <template slot-scope="scope">
                <el-form-item>
					 <el-input  placeholder="请输入内容" v-model="scope.row.ingredientsAmount" ></el-input>
                </el-form-item>
              </template>
            </el-table-column>

                    <el-table-column label="操作" width="150" align="center">
                        <template slot-scope="scope">
                            <el-button
                                type="text"
                                style="color: red;"
                                @click="handleDel1(scope.$index, scope.row)"
                            >删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-col class="add" @click.native="addProduct1">+添加辅料</el-col>
            </el-row>

            <el-dialog title="选择" :visible.sync="dialogTableVisible2">
                <el-form :model="ruleForm1" label-position="left" label-width="100px">

                </el-form>
                <el-table
                    :data="ProductList1"
                    border
                    style="margin-top:20px;"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                >
                     <el-table-column prop="productName" sortable label="物料名称"></el-table-column>
            <el-table-column prop="warehouseName" sortable label="所属仓位"></el-table-column>
            <el-table-column prop="batch" sortable label="批号"></el-table-column>
            <el-table-column prop="batch" sortable label="可用数量">
				<template slot-scope="scope">
					{{scope.row.number}}{{scope.row.specsUnit}}
				</template>
			</el-table-column>

                    <el-table-column label="操作" width="150" align="center">
                        <template slot-scope="scope">
                            <el-button
                                type="text"
                                @click="handleSelect2(scope.$index, scope.row)"
                            >选择</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                layout="total, prev, pager, next, jumper"
                :page-size="pagesize"
                :current-page.sync="currentPage1"
                :total="total1"
                @current-change="handleCurrentChange1"
                style="margin-top:20px"
                ></el-pagination>
            </el-dialog>
            </el-form>


      <el-form-item class="footerFixed" v-if="type != 'detail'" label-width="0px">
          <el-button type="primary" style="margin:0 20px;" @click="save">提交</el-button>
          <el-button @click="goback">返回</el-button>
      </el-form-item>
	  <el-form-item class="footerFixed" v-else label-width="0px">

	       <el-button @click="goback">返回</el-button>
	  </el-form-item>
    </el-form>
  </div>
</template>


<script>
// import {unit_findByList,sub_save} from "@/request/api"
import {materialManagement_findBylistNoPage,scTechnology_findByListNoPage,productionPlan_added,productionPlan_modify,productionPlan_selectId } from "@/request/produceApi"
    import { client_findByList,user_findByAll,storage_findByList,unit_findByList,supplier_findByAll} from "@/request/api"
    // import { productionPlan_added,productionPlan_modify,productionPlan_delete } from "@/request/breedApi"
	import {CodeToText} from 'element-china-area-data'
import { Form } from 'element-ui'
export default {
	  data() {
			return {
                list:[
                //     {
                //     materialName:'',
                //     materialCode:'',
                //     materialBatch:'',
                //     materialAmount:'',
                //     type:0
                // }
                ],
                list1:[
                    // {
                    //     ingredientsName:'',
                    //     ingredientsCode:'',
                    //     ingredientsSupplier:'',
                    //     ingredientsAmount:'',
                    //     ingredientsBatch:'',
                    //     type:1
                    // }
                ],
                basesourcelist:[],
				orderDetailedList:[{
					name:'',
					specs:'',
					id:'',
					batch:'',
					storageId:'',
					number:'',
					totalPrice:''
				}],
				  query:'',
				  // 客户信息
				  form1:{

				  },
				  ruleForm:{
					uername:''
				  },
				  dialogTableVisible:false,
				  tableData:[{}],
				  pagesize:10,
				  currentPage:1,
				  total:1,
				  currentPage1:1,
				  total1:1,
				  showSH:false,

				  // 订单明细
				  ruleForm1:{
					username:''
				  },
				  dialogTableVisible1:false,
                    dialogTableVisible2:false,
				  // 财务信息

				  showFormItem:0,
				  headerlist:{},
				  userlist:'',
				  ProductList:[],
                  ProductList1:[],
				  index:'',
				  id:'',
                  type:'',
                  scph:'',
                unitlist:[],
                techList:[],
                breedList:[],
                supplierList:[],
                type2:'原料',
                  abcd: {

                  }
			}
	  },
	  mounted() {

		 this.id = this.$route.query.id
		 this.type = this.$route.query.type
		 if(this.id == undefined){

         }else{
             this.getdetail()
         }
		 this.init()
		 this.getUserList()
         this.getProductList()
         this.getProductList1()
         this.getunit()
         // this.gettechList()
         this.getsupplier()
	  },
	  methods: {

        //   获取工艺工序id
        gettech(val){
            console.log(val)
            this.headerlist.craftName = val.processName
            this.headerlist.technologyId = val.id
        },

        //   获取详情
        getdetail(){
            let data = {
                id:this.id
            }
            productionPlan_selectId(data).then((res)=>{
                this.headerlist = res.data
                for(var i=0 ;i<this.headerlist.list.length;i++){
                    if(this.headerlist.list[i].type == 0){
                        this.list.push(this.headerlist.list[i])
                    }else{
                        this.list1.push(this.headerlist.list[i])
                    }
                }
            })
        },
        //   获取供应商
        getsupplier(){
            supplier_findByAll("").then((res)=>{
                this.supplierList = res.data
            })
        },

        //打开原料选择列表
          openmaterial(index,row){
              this.dialogTableVisible1 = true
              this.index = index
          },
          //打开辅料选择列表
          openmaterial1(index,row){
              this.getProductList1()
              this.dialogTableVisible2 = true
              this.index = index
          },
        //  获取工艺工序
          gettechList(val){
              // let data = {}
              scTechnology_findByListNoPage({materialName:val}).then((res)=>{
                  this.techList = res.data
              })
          },
        //   获取单位
          getunit(){
              unit_findByList("").then((res)=>{
                  this.unitlist = res.data
              })
          },
        //   根据产品类型获取品名
          changeType(val){
            //   console.log(val)
            let data = {
                materialType:val,
                // materialName:this.searchName1
            }
            materialManagement_findBylistNoPage(data).then((res) => {
                this.breedList = res.data
            })
          },
		  goback(){
			this.$router.go(-1)
		  },

          //提交生产计划
		  save(){
           var list = this.list.concat(this.list1)
            let data = {
                processplan: this.headerlist,
                materials:list
            }
            //   console.log(this.headerlist,'生产计划');
			  if(this.id == undefined){
				  productionPlan_added(data).then((res)=>{
					this.$notify({
					    title: '提示',
					    message: '保存成功',
					    type: 'success',
					    duration: 1000
					});
					this.$router.go(-1);
				})
			  }else{
				  productionPlan_added(data).then((res)=>{
					this.$notify({
					    title: '提示',
					    message: '修改成功',
					    type: 'success',
					    duration: 1000
					});
					this.$router.go(-1);
				  })
			  }

		  },

		//   添加 原料
		  addProduct(){
			  // console.log(111)
			this.list.push({materialName:'',
                    materialCode:'',
                    materialBatch:'',
                    materialAmount:'',type:0})
		  },
        // 添加辅料
          addProduct1(){
			  // console.log(111)
			this.list1.push({ingredientsName:'',
                        ingredientsCode:'',
                        ingredientsSupplier:'',
                        ingredientsAmount:'',
                        ingredientsBatch:'',
                        type:1})
		  },
		  // 获取 产品表
		  getProductList(){
			  let data = {
				  page:this.currentPage1,
                  cop:this.type2
			  }
			 storage_findByList(data).then((res)=>{

				 this.ProductList = res.rows
				 // console.log(this.ProductList)
				 this.total1 = res.total
				 for(var i=0;i<this.ProductList.length;i++){
					//  this.ProductList[i].oneunit = this.ProductList[i].unit.substring(this.ProductList[i].unit.lastIndexOf("\/")+1,this.ProductList[i].unit.length)

				 }
			 })
		  },
          getProductList1(){
			  let data = {
				  page:this.currentPage1,
                  cop:"辅料"
			  }
			 storage_findByList(data).then((res)=>{

				 this.ProductList1 = res.rows
				 // console.log(this.ProductList)
				 this.total2 = res.total
				 for(var i=0;i<this.ProductList.length;i++){
					//  this.ProductList[i].oneunit = this.ProductList[i].unit.substring(this.ProductList[i].unit.lastIndexOf("\/")+1,this.ProductList[i].unit.length)

				 }
			 })
		  },
		  // 获取员工
		  getUserList(){
			  user_findByAll("").then((res)=>{
				  this.userlist = res.data
			  })
		  },

		    getlist(){
				this.init()
			},
			// 获取客户信息
			init(){
				client_findByList({page:this.currentPage,query:this.query}).then((res)=>{
					this.tableData = res.rows
					this.total = res.total
					for (let i = 0; i < this.tableData.length; i++) {
						 var list = this.tableData[i].area.split(",")
						 var arr = ""
						 for (let k = 0; k < list.length; k++) {
							 arr += CodeToText[list[k]] + "/"
						 }
					    this.tableData[i].area = arr.substr(0,arr.length-1)
					}
				})
			},


            // 删除选择的原料
			handleDel(index,row){
				this.list.splice(index,1)
			},
            // 删除选择的辅料
			handleDel1(index,row){
				this.list1.splice(index,1)
			},

			select(){
			  this.dialogTableVisible = true
			},
			handleCurrentChange(val){
				this.currentPage = val
				this.init()
			},
			handleCurrentChange1(val){
				this.currentPage1 = val
				this.getpProductList()
			},
			// 原料信息
			handleSelect1(index,row){
			  this.dialogTableVisible1 = false
			  this.list[this.index].materialName = row.productName
			  this.list[this.index].materialCode = row.materialCode
			  this.list[this.index].materialBatch = row.batch
			  this.list[this.index].materialAmount = row.number
              this.list[this.index].type = 0
        console.log(this.list)
			},
            // 辅料信息
			handleSelect2(index,row){
			  this.dialogTableVisible2 = false
			  this.list1[this.index].ingredientsName = row.productName
			  this.list1[this.index].ingredientsCode = row.materialCode
			//   this.list1[this.index].ingredientsSupplier = row.batch
			  this.list1[this.index].ingredientsAmount = row.number
              this.list1[this.index].ingredientsBatch = row.batch

              this.list1[this.index].type = 1
			},
			select1(index,row){
			    this.dialogTableVisible1 = true
				this.index = index
			},


		  },
	}
</script>



<style  scoped>
  /* .containers{
    padding: 15px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
  } */
  .el-pagination{
      text-align: center;
  }
  .add{
    background-color: rgba(235, 245, 255, 1);
    border: 1px dotted lightgray;
    color: #333;
    margin: 10px 0 0 0;
    padding: 10px 0;
    text-align: center;
    cursor: pointer;
  }
  .order .order-table .el-form-item{
    margin-bottom: 0;
  }
</style>

